<!DOCTYPE html>
<html>
	<head>
		<title></title>
		<meta charset="utf-8" />
	</head>
	<body>
		
		<div class="main">
			<div class="test">天</div>
			<div class="item">天</div>
			<div class="item">向</div>
		</div>
		<button id="add">点击我增加</button>
		<button id="remove">点击我减少</button>

		<script type="text/javascript">
			/**
			 * 浏览器中DOM和js采用的是不一样的引擎
			 * DOM采用的是渲染引擎，而js采用的是v8引擎
			 * 所以在用js操作DOM时会比较耗费性能，因为他们需要桥来链接他们
			 * 
			 */
			var add=document.querySelector("#add");
			var remove=document.querySelector("#remove");
			var main=document.querySelector(".main")
			var test=document.querySelector(".test")
			add.onclick=function () {
				var itemN=document.createElement('div')
				var txt=document.createTextNode('上')
				itemN.setAttribute("class","addDom");
				itemN.appendChild(txt)
				main.appendChild(itemN)
			}
			remove.onclick=function () { 
				var test = document.querySelector(".addDom");
				main.removeChild(test)
				test = null;
				// console.log(test)
			}
			
			
		</script>
	</body>
</html>